import React, { useState } from 'react'
import { Grid } from 'antd-mobile'
import './grid.less'

// 要求父组件传递一个数组进来
interface Iprop {
    list: ISelectGridData[];
    title: string;
    onChange: (value: string) => void;
}

// 自己分析得到： 中文是给用户看的，英文是我们要带回服务器的
// interface IData {
//     text: string; // 中文
//     value: string; // 英文
// }

export default function SelectGrid({ list, title, onChange }: Iprop) {

    const [index, setIndex] = useState(0)

    const change = (idx: number, value: string) => {
        setIndex(idx)
        onChange(value);
    }

    return (
        <div className='grid'>
            <h4>{title}</h4>
            <Grid columns={3} gap={8}>
                {
                    list.map((item, idx) => <Grid.Item key={item.value}>
                        <div onClick={() => change(idx, item.value)} className={['grid-item', index === idx ? 'current' : ''].join(' ')}>{item.text}</div>
                    </Grid.Item>)
                }
            </Grid>
        </div>
    )
}
